import Vue from 'vue'

const component = {
  props : ['props1'],
  name: 'comp',
  // NO.1 template 并不是自动创建的，而是有一个 render 来创建的
  // 方法1 创建template
  // template: `
  //   <div :style="style">
  //     <slot></slot>
  //   </div>
  // `,

  // NO.2 方法2 创建tempalte
  render (createElement) {
      return createElement('div', {
        style: this.style,

        // 如果使用了nativeOn 这里就不需要再处理了
        // vue内置已经处理过这种事件了
        // on: {
        //   click: () => {
        //     this.$emit('click')
        //   }
        // }
      }, [
        this.$slots.default,
        this.$slots.header,
        this.props1
      ])
  },
  data(){
    return {
      style: {
        width: '200px',
        height: '200px',
        border: '1px solid #aaa'
      },
      value: '【component value data】'
    }
  }
}

new Vue({
  components: {
    CompOne: component
  },
  el: '#root',
  data () {
    return {
      value: '【local.value】'
    }
  },
  mounted(){
    console.log(this.$refs.comp.value, this.$refs.span)
  },

  methods: {
    handleClick(){
      console.log('clicked')
    }
  },
  // NO.1 第一种定义 template 的方法
  // template: `
  //   <div>
  //     <comp-one ref="comp">
  //       <span >{{value}}</span>
  //     </comp-one>
  //   </div>
  // `,

  // NO.2 第二种 通过 render 定义 template 的方法
  // 会传入一个函数 叫createElement
  // template 在编译过程中 等价于 render方法
  // 在每一个vue实例中都会有 createElement 方法
  render (createElement) {
    return createElement('comp-one', {
      ref: 'comp',
      props : {
        props1: this.value
      },

      // 不自动绑定
      // on: {
      //   click: this.handleClick
      // },

      // 自动绑定到原生的dom（父组件）上
      nativeOn: {
        click: this.handleClick
      }
    },
    //子节点必须是数组
    [
      createElement('span', {
        ref: 'span',
        slot: 'header',
        domProps: {
          innerHTML: '<span>happy</span>'
        },
        attrs: {
          id: "test-id"
        }
      }, this.value)
    ])
  }
})
